<template>
	<view class="container">
		<div class="tool" v-if="dataJson">
			<div class="t" >
				当前审核状态: <span :style="{ color: dataJson.is_auth == 0 ? 'blue' : dataJson.is_auth === 2 ? 'orange' : 'red' }"> {{type[dataJson.is_auth]}}</span>
			</div>
			<div class="info" v-if="dataJson.is_auth==2">
				拒绝理由:{{dataJson.msg}}
			</div>
		</div>
		<view class="form">
			<div class="items">
				<p>商铺名称</p>
				<view class="r">
					<input type="text" v-model="formData.name" :disabled="flag" placeholder="请输入商铺名称" />
				</view>
			</div>
			<div class="items">
				<p>营业执照</p>
				<view class="r">
					<uni-file-picker v-model="fileList" :disabled="flag"  file-mediatype="image" :limit="1"
						@select="handleSelect" />
				</view>
			</div>
			<div class="items">
				<p>联系人</p>
				<view class="r">
					<input type="text" v-model="formData.realname" :disabled="flag" placeholder="请输入联系人姓名" />
				</view>
			</div>
			<div class="items">
				<p>手机号码</p>
				<view class="r">
					<input type="text" v-model="formData.mobile" :disabled="flag" placeholder="请输入手机号码" />
				</view>
			</div>
			<div class="items">
				<p>身份证</p>
				<view class="r">
					<input type="text" v-model="formData.idcard" :disabled="flag" placeholder="请输入身份证号" />
				</view>
			</div>
			<view class="form-item items">
				<p>所在地区</p>
				<view class="r">
					<input v-model="regionText" placeholder="请选择省市区" disabled v-if="!flag" @click="showRegionPicker" />
					<input type="text" :value="regionText" disabled v-if="flag" />
				</view>
			</view>
			<view class="items" v-if="dataJson.is_auth!=0||dataJson.is_auth!=1||!dataJson">
				<view class="r">
					<button @tap="sub()">提交</button>
				</view>
			</view>
		</view>
		<view>

		</view>
		<!-- 地区选择器 -->
		<region-picker ref="regionPicker" @confirm="onRegionConfirm" />
	</view>
</template>

<script>
	import {
		request
	} from '@/utils/request.js'
	import RegionPicker from '@/components/region-picker/region-picker.vue'
	export default {
		components: {
			RegionPicker
		},
		data() {
			return {
				flag: false,
				type: ['待审核', '已通过', '拒绝'],
				regionText: "",
				fileList: [],
				dataJson: '',
				formData: {
					fileList: [],
					name: '',
					fileList: [],
					realname: '',
					mobile: '',
					idcard: '',
					city: '',
					province: '',
					area: '',
				}
			}
		},
		onLoad() {
			this.getInfo()
		},
		methods: {
			getInfo() {
				request({
					url: 'user/apply-info',
					method: 'get',
				}).then(res => {
					if (res.status == 200) {
						if (!res.data) {
							return
						}
						if (res.data.is_auth != 2) {
							this.flag = true
						}
						this.dataJson = res.data
						this.regionText = res.data.province + res.data.city + res.data.area;
						this.fileList = [{
							name: '11111',
							extname: '1111',
							url: res.data.thumb
						}]
						this.formData = {
							name: res.data.name,
							fileList: res.data.thumb,
							realname: res.data.realname,
							mobile: res.data.mobile,
							idcard: res.data.idcard,
							city: res.data.city,
							province: res.data.province,
							area: res.data.area,
						}
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
			},
			// 显示地区选择器
			showRegionPicker() {
				console.log(this.$refs.regionPicker)
				this.$refs.regionPicker.isShow()
			},

			// 地区选择确认
			onRegionConfirm(region) {
				this.tempRegion = region
				this.formData.province = region[0]
				this.formData.city = region[1]
				this.formData.area = region[2]
				this.regionText = region[0] + region[1] + region[2]
			},
			sub() {
				if(!this.formData.name){
					uni.showToast({
						title:'请输入商铺名称',
						icon:'none'
					})
					return
				}
				if (!/^1[3-9]\d{9}$/.test(this.formData.mobile)) {
					console.log("手机号格式不正确");
					uni.showToast({
						title:'请输入正确手机号',
						icon:'none'
					})
					return
				}
				
				if(this.fileList.length<=0){
					uni.showToast({
						title:'请上传营业执照',
						icon:'none'
					})
					return
				}
				if(!this.fileList.realname){
					uni.showToast({
						title:'请输入姓名',
						icon:'none'
					})
					return
				}
				if(!this.regionText){
					uni.showToast({
						title:'请选择片区',
						icon:'none'
					})
					return
				}
				if(!/^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/.test(this.formData.idcard)){
					uni.showToast({
						title:'请输入正确身份证',
						icon:'none'
					})
					return
				}
				this.formData.fileList = this.fileList.url
				request({
					url: 'user/agent-apply',
					method: 'post',
					data: this.formData
				}).then(res => {
					if (res.status == 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				}).catch(err => {
					uni.showToast({
						title: err.message,
						icon: 'none'
					})
				})
				// uni.showToast({
				// 	title: '提交成功',
				// 	icon: 'none'
				// })
				// setTimeout(() => {
				// 	uni.navigateBack()
				// }, 1000)
			},
			tabChange(index) {
				this.formData.index = index
			},
			handleSelect(e) {
				// 微信小程序环境
				const tempFilePaths = e.tempFilePaths;
				tempFilePaths.forEach(path => {
					uni.uploadFile({
						url: 'https://apishop.aa.ka.dajunzhu.cn/admin/login/upload',
						filePath: path,
						name: 'img',
						success: (res) => {
							const data = JSON.parse(res.data);
							console.log(data)
							this.formData.fileList=[{
								name: data.data.filename,
								extname: data.data.ext,
								url: data.data.url
							}];
							this.fileList=[{
								name: data.data.filename,
								extname: data.data.ext,
								url: data.data.url
							}];
						}
					});
				});
			}
		}
	}
</script>
<style lang="scss">
	.container {
		box-sizing: border-box;
		padding: 20rpx;
	}

	.items {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;

		p {
			font-size: 28rpx;
			width: 200rpx;
			text-align: right;
			padding-right: 20rpx;
			box-sizing: border-box;
		}

		.r {
			flex: 1;
			width: 300rpx;
			display: flex;
			align-items: center;

			input {
				width: 100%;
				font-size: 28rpx;
				border: 1px solid #dedede;
				height: 60rpx;
				border-radius: 10rpx;
				padding-left: 10rpx;
			}

			button {
				color: #fff;
				background-color: #e74c3c;
				width: 300rpx;
				height: 70rpx;
				line-height: 70rpx;
			}

		}

		.radio {
			display: flex;
			border: 1px solid #dedede;
			border-radius: 10rpx;
			overflow: hidden;

			.li {
				width: 150rpx;
				background-color: #fff;
				text-align: center;
				height: 50rpx;
				font-size: 28rpx;
				line-height: 50rpx;

				&:nth-of-type(1) {
					border-right: 1px solid #dedede;
				}

				&.active {
					color: #fff;
					background-color: #e74c3c;
				}
			}

		}
	}

	.tool {
		padding: 30rpx;
		border-radius: 10rpx;
		border-bottom: 1px solid #eee;
		margin-bottom: 30rpx;
		font-size: 30rpx;
		color: #333;

		.t {
			margin-bottom: 20rpx;
		}
	}
</style>